<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{},~{::style})">
    <title>JAVA课程在线考试</title>
    <style type="text/css">
        .container{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            border: #f8f8f8 30px solid;
            padding: 0;
        }
        .content{
            background-color: #ffffff;
            float: right;
            min-height: 75vh;
            width: 80%;
        }
        .title{
            align-items: center;
            font-size: 50px;
            color: #2f3542;
            padding-top: 40px;
            max-width: 80%;
        }
        .info{
            list-style: decimal;
            margin-top: 10px;
            color: #2f3542;
            padding: 10px 20px 10px 20px;
        }
        .info li{
            line-height: 1.8;
            font-size: 14px;
        }
        .description{
            background: #f3f3f3;
            color: #888;
            padding: 10px 20px 10px 20px;
            width: max-content;
        }
        .time{
            border: #16a085 solid 1px;
            padding: 5px 10px 5px 10px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .normal{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::exam_header()"></div>

    <div class="layui-layout-body" style="margin-top: 50px;background-color: #f8f8f8;">
        <div class="layui-container container">
            <div class="content">
                <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">

                    <div class="title">
                        <p th:text="${exam.title}"></p>
                    </div>
                    <div class="description">
                        <span  th:text="${exam.content}"></span>
                    </div>
                    <ol class="info">
                        <li>
                            <p th:text="'时间：'+${#dates.format(exam.startTime, 'yyyy-MM-dd HH:mm:ss')}+' - '+${#dates.format(exam.endTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                        </li>
                        <li>
                            <span th:text="'用时：'+${exam.time}+' 分钟'"></span>
                        </li>
                        <li>

                            <span th:text="'总分：'+${paper.score}+' 分'"></span>
                        </li>
                    </ol>
                    <div class="time" id="test"></div>

                    <div class="normal">
                        <table class="layui-table" >
                            <thead>
                            <tr>
                                <th>题型</th>
                                <th>单选题</th>
                                <th>多选题</th>
                                <th>判断题</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>数量</td>
                                <td><span th:text="${paper.radioCount}"></span></td>
                                <td><span th:text="${paper.selectCount}"></span></td>
                                <td><span th:text="${paper.judgeCount}"></span></span></td>
                            </tr>
                            <tr>
                                <td>分值</td>
                                <td><span th:text="${paper.radioScore}"></span></td>
                                <td><span th:text="${paper.selectScore}"></span></td>
                                <td><span th:text="${paper.judgeScore}"></span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="normal">
                        <button id="attendBtn" type="button" class="layui-btn layui-btn-lg layui-btn-disabled">考试未开始</button>
                    </div>
                </div>
            </div>
        </div>

        <div th:replace="front-common::footer"></div>
    </div>

</div>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看试卷</a>
</script>
<script th:inline="javascript">
    layui.use('util', function(){
        var util = layui.util;

        var endTime = new Date([[${exam.startTime}]]).getTime(); //假设为结束日期
        var serverTime = $.ajax({async:false}).getResponseHeader("Date"); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
        var nowTime = new Date(serverTime).getTime();
        console.log(endTime);
        console.log(nowTime);

        if(nowTime >= endTime){
            reload();
        }

        util.countdown(endTime, nowTime, function(date, serverTime, timer){
            var str = date[0] + ' 天 ' + date[1] + ' 时 ' +  date[2] + ' 分 ' + date[3] + ' 秒';
            $('#test').html('距离考试开始还有：'+ str);
            if(date[0]+date[1]+date[2]+date[3] <= 0){
                reload();
            }
        });

        $("#attendBtn").click(function (){
            window.location.href="/exam/attend/"+[[${exam.id}]];
        });

        function reload(){
            $("#attendBtn").attr("class","layui-btn layui-btn-lg");
            $("#attendBtn").text("参加考试");
            $('#test').remove();
        }
    });
</script>
</body>

</html>